<template>
  <div class="system-chart task-mt12">
    <div class="chart-header task-flex task-ai">
      <div class="task-span1 task-flex task-ai">
        <div class="chart-icon task-bjd1 task-mr12"><i class="iconfont icon-fund-fill"></i></div>
        <span>{{ $t('report.eventChart.title1') }}</span>
        <el-tooltip placement="top" class="task-ml4">
          <div slot="content">{{ $t('report.eventChart.title2') }}<br/>{{ $t('report.eventChart.title3') }}</div>
          <i class="iconfont icon-question task-icon"></i>
        </el-tooltip>
      </div>
      <div class="task-flex task-pointer">
        <div class="task-ml12">
          <i class="iconfont icon-cloud-download"></i>
          {{ $t('product.component.qrcodeDialog.btn2') }}
        </div>
      </div>
    </div>
    <!-- 折线图 -->
    <div class="chart-content">
      <div id="chart"></div>
    </div>
    <!-- 表格 -->
    <div class="table task-mt12">
      <div class="chart-header task-flex task-ai task-pointer">
        <div class="task-span1"></div>
        <div class="task-flex">
          <div v-if="isButtonDisplayed && exportAuth">
            <i class="iconfont icon-upload1"></i>
            {{ $t('common.base.export') }}
          </div>
          <div class="task-ml12" v-if="isButtonDisplayed && exportAuth">
            <i class="iconfont icon-upload1"></i>
            {{ $t('common.base.exportAll') }}
          </div>
          <div class="task-ml12">
            {{ $t('common.base.collapse') }}
            <i class="iconfont icon-triangle-down"></i>
          </div>
        </div>
      </div> 
      <!-- table -->
      <!-- <el-table
        stripe
        border
        :data="tableData"
        ref="multipleTable"
        @select="handleSelection"
        @select-all="handleSelection"
        header-row-class-name="common-list-table-header taks-list-table-header"
      >
        <el-table-column
          type="selection"
          width="48"
          align="center"
          class-name="select-column"
        ></el-table-column>
        <el-table-column
          v-for="(item, index) in tableNames"
          :key="index"
          :label="item.displayName"
        >
          <template slot-scope="scope">
          </template>
        </el-table-column>
      </el-table> -->
      <!-- 分页 -->
      <!-- <div class="spare-parts-foot task-flex task-ai">
        <el-pagination
          class="comment-list-table-footer-pagination"
          background
          :page-sizes="defaultTableData.defaultPageSizes"
          :page-size="params.pageSize"
          :total="pagination.total"
          :current-page="params.pageNum"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
          layout="prev, pager, next, sizes, jumper"
        >
        </el-pagination>
      </div>      -->
    </div>
  </div>
</template>
<script>
import echarts from 'packages/Echarts';
import { checkButtonDisplayed } from '@src/util/dom';
import { t } from '@src/locales';
export default {
  name: 'event-chart',
  data() {
    return {
      isButtonDisplayed: checkButtonDisplayed(),
    }
  },
  mounted() {
    this.lineChart()
  },
  computed: {
    exportAuth() {
      let initData = JSON.parse(sessionStorage.getItem('_init_data'))
      return initData.auths?.REPORT_EXPORT || 0
    },
  },
  methods: {
    // 折线图
    lineChart() {
      const myChart = echarts.init(document.getElementById('chart'))
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [t('report.eventChart.title4'), t('report.eventChart.title5')]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [t('common.base.aboutTime.Mon'),t('common.base.aboutTime.Tue'),t('common.base.aboutTime.Wed'),t('common.base.aboutTime.Thu'),t('common.base.aboutTime.Fri'),t('common.base.aboutTime.Sat'),t('common.base.aboutTime.Sun')]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: t('report.eventChart.title4'),
            type: 'line',
            stack: t('report.eventChart.total'),
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: t('report.eventChart.title5'),
            type: 'line',
            stack: t('report.eventChart.total'),
            data: [220, 182, 191, 234, 290, 330, 310]
          },
        ]
      };

      myChart.setOption(option, true);
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../system.scss';
</style>